<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
    <meta charset="utf-8">
    <script src="https://unpkg.com/redux@3.7.2/dist/redux.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <title>Redux</title>
</head>
<body>
<div id="react-container"></div>
  <script type="text/babel">

    const { createStore, combineReducers } = Redux

    const color = (state = {}, action) => {
        switch (action.type) {
            case "ADD_COLOR":
                return {
                    id: action.id,
                    title: action.title,
                    color: action.color,
                    timestamp: action.timestamp,
                    rating: 0
                }
            case "RATE_COLOR":
                return (state.id !== action.id) ?
                    state :
                    {
                        ...state,
                        rating: action.rating
                    }
            default :
                return state
        }
    }

    const colors = (state = [], action) => {
        switch (action.type) {
            case "ADD_COLOR" :
                return [
                    ...state,
                    color({}, action)
                ]
            case "RATE_COLOR" :
                return state.map(
                    c => color(c, action)
                )
            case "REMOVE_COLOR" :
                return state.filter(
                    c => c.id !== action.id
                )
            default:
                return state
        }
    }

    const sort = (state="SORTED_BY_DATE", action) => {
        switch (action.type) {
            case "SORT_COLORS":
                return action.sortBy
            default :
                return state
        }
    }

    const store = createStore(
        combineReducers({ colors, sort })
    )

    console.log(store.getState())


  </script>
</body>
</html>
